/*
* @Author: msi-pc
* @Date:   2021-04-07 00:53:49
* @Last Modified by:   msi-pc
* @Last Modified time: 2021-05-18 22:43:07
*/
//var webpack = require('webpack');
const path = require('path');
const webpack = require('webpack');
//MiniCssExtractPlugin 本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//css打包
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//该插件将为你生成一个 HTML5 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);


//template: './src/view/layout' + name + '.ejs',
//【Html-js】模板处理-参数配置
// vargetHtmlConfig = function(name){
//   return {
//       template  : './src/view/' + name + '.html',
//       filename  : 'view/' + name + '.html',
//       inject    : true,
//       hash      : true,
//       chunks    : ['common', name]

//   };
// };

var config = {
  mode: 'development',
  entry: {
    //'common': ['./src/page/common/index.js'],
    'index'                   : ['./src/page/index/index.js'],

    //'login' : ['./src/page/login/index.js'],

    // 'req-bootstrap.min'       : ['./src/page/index/req-bootstrap.min.js'],
    // 'req-style'               : ['./src/page/index/req-style.js'],
    // 'common-1'              : ['./src/common-1.js'],
    // 'common-2'              : ['./src/common-2.js'],
    // 'common-3'              : ['./src/common-3.js'],
    // 'common-4'              : ['./src/common-4.js'],
    
    // jq
    // 'bootstrap.min'         : ['./src/util/js/bootstrap.min.js'],
    // 'responsiveslides.min'  : ['./src/util/js/responsiveslides.min.js'],
    // 'owl.carousel'          : ['./src/util/js/owl.carousel.js'],
    // 'jquery.magnific-popup' : ['./src/util/js/jquery.magnific-popup.js'],
    // 'jquery.inview.min'     : ['./src/util/js/jquery.inview.min.js'],
    // 'wow.min'               : ['./src/util/js/wow.min.js'],
    // 'mousescroll'           : ['./src/util/js/mousescroll.js'],
    //'main'                  : ['./src/util/js/main.js']
    // 'numscroller-1.0'       : ['./src/util/js/numscroller-1.0.js'],
    // 'move-top'              : ['./src/util/js/move-top.js'],
    // 'easing'                : ['./src/util/js/easing.js']
    
  },

  devtool: 'inline-source-map',

  output: {
    path        : path.resolve(__dirname, 'dist'),//存放文件路径
    publicPath  : '/dist/',//访问文件路径
    filename    : 'js/[name].js',

  },
  //配置热更新信息
  devServer:{
      contentBase  : "dist", // 指定一个本地服务器路径，否则会默认为根目录
      host         : 'localhost',
      port         : '80',
      open         : true,          //自动拉起浏览器
      hot          : true            //热加载并自动刷新
      //hotOnly:true  不自动刷新
  },

/*  externals: {
     'jquery': 'window.jQuery'
  },*/

  /**
    本插件插入CSS提取到单独的文件中，为每个包含CSS的JS文件创建一个CSS文件，并支持CSS和SourceMaps的按需加载。
  */
  plugins: [
    //"@babel/plugin-transform-async-to-generator",//ES7的async/await语法
    //这里需要用到 Webpack 的 ProvidePlugin 插件。
    new webpack.ProvidePlugin({
         $              : 'jquery',
         jQuery         : 'jquery',
    }),
    //css单独打包到文件
    new ExtractTextPlugin('css/[name].css'),
    //【Html-js】模板处理
    // new HtmlWebpackPlugin(getHtmlConfig('index')),
    // new HtmlWebpackPlugin(getHtmlConfig('login')),
    new HtmlWebpackPlugin({
          title     : 'qweqweqeqweqweq',
          template  : './src/index.html',
          filename  : 'index.html',
          favicon   : './favicon.ico',
          inject    : 'head',
          hash      : true,
          chunks    : ['index' 
          // 'index'
          //'common-1', 'common-2','common-3', 'common-4' 
          //,'responsiveslides.min', 'owl.carousel', 'bootstrap.min' ,'jquery.magnific-popup', 'jquery.inview.min', 'wow.min', 'mousescroll', 'main', 'numscroller-1.0', 'move-top', 'easing'
          ]
    }),
    // new HtmlWebpackPlugin({
    //       title     : 'qweqweqeqweqweq',
    //       template  : './src/index.html',
    //       filename  : 'index.html',
    //       inject    : 'head',
    //       hash      : true,
    //       chunks    : [
    //       // 'index'
    //       //'common-1', 'common-2','common-3', 'common-4' 
    //       //,'responsiveslides.min', 'owl.carousel', 'bootstrap.min' ,'jquery.magnific-popup', 'jquery.inview.min', 'wow.min', 'mousescroll', 'main', 'numscroller-1.0', 'move-top', 'easing'
    //       ]
    // })

  ],
  module: {
    rules: [
      {
        test: /\.css$/,

        use:ExtractTextPlugin.extract({
            fallback:'style-loader', // 回滚
            use:[
                {loader:'css-loader'},
                // {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
            ],
            publicPath:'../' //解决css背景图的路径问题
        })
      },
      // 图片处理

      {
          test: /\.(png|svg|jpg|jpeg|gif)\??.*$/,    
          use:[{
              loader:'file-loader',
              options:{
                  name:'[name].[ext]?[hash]',    //可以重写css中引入图片部分
                 // publicPath: './images/',       //可以重新生成图片到新的目录
                  outputPath: 'images/'
              }
          }]
      },
      {
          test: /\.string$/,
          loader:"html-loader",
          query: {
            minmize : true,
            removeAttributeQuotes : false
          }

      },
      {
          test: /\.(html)$/,
          use: [
            {
                loader:"html-loader",
                options:{
                    sources: false,
                    attrs:["img:src","img:data-src"]//配置图片的属性
                }
            }
          ]
      },
      // 加载字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
            loader:'file-loader',
            options: {
                name: '[name].[ext]',          //path为相对于context的路径
                context:'src',
                publicPath: '../fonts/',
                outputPath: 'fonts/'
            }
        }]
      },
      // 【Html-html】模板处理
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          
          variable     : 'data',
          interpolate  : '\\{\\{(.+?)\\}\\}',
          evaluate     : '\\[\\[(.+?)\\]\\]',
          esModule     : false
          
        }
      },
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      }

    ]
  
  },
  resolve: {
    alias:{
      css      : __dirname + '/src/css',
      util     : __dirname + '/src/util',
      view     : __dirname + '/src/view',
      page     : __dirname + '/src/page',
      service  : __dirname + '/src/service',
      images   : __dirname + '/src/images',
    }
  },

  /**
    从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。
  */
  optimization: {
    splitChunks: {
      cacheGroups: {
          commons: {
            name: "commonBase",
            filename: "js/commonBase.js",
            chunks: "initial",
            minChunks: 2                    
          }
      }
    }
  }

};
/*if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
*/

module.exports = config;

